<template>
    <div class="order">
		<div class="common-form" v-for="(item,index) in add"  @touchstart="showDeleteButton(item.id)" @touchend="clearLoop">
			<div class="order-select-info">

				<em class="order-select"  @click="setAddress(item.id)" :class="{order_select_pink:item.id == tabIndex}"></em>
				<div class="order-select-info-name" @click="setAddress(item.id)">
					{{item.name}}  {{item.tel}}
				</div>
				<div class="order-select-info-add" @click="setAddress(item.id)">
					<label>地址：</label>
					<span>{{item.province}}{{item.city}}{{item.area}}{{item.address}}</span>
				</div>
				<a class="order-select-info-edit" @click="switchTo('/AddressEdit/'+ item.id)"></a>
			</div>
		</div>
        
        <!-- <div class="card" v-for="(item,index) in add"  @touchstart="showDeleteButton(item.id)" @touchend="clearLoop">
            <div class="delete-button"  >请问请问请问请问请问</div>
        </div> -->
        <!-- <div v-show="isDeleting"></div> -->

		<div class="footer-100"></div>
		<!-- 支付 -->
		<a class="btn-big" @click="baocun"><em>+</em>新建收货地址</a>
	</div>
</template>

<script>
import axios from "axios";
import qs from 'qs'
import url from 'url'
    export default {
        name:'AddressList',
        data () {
            return {
                add:[],
                tabIndex:0,
                // isDeleting:false
            }
        },
        methods:{
            switchTo(path){
                this.$router.push(path)
            },
            // del:function(id){
            //     var that = this
            //     var openid = 'o1KIj095lVCrkl8pE4S1wXgbcicQ'
            //     layer.open({
            //         content: '您确定要刷新一下本页面吗？'
            //         ,btn: ['刷新', '不要']
            //         ,yes: function(index){
            //             // location.reload();
            //             var upload = {
            //                 openid:openid,
            //                 id:id
            //             }
            //             that.$http.post('/vipmember/index/delAddress',qs.stringify(upload)).then(rs=>{
            //                 console.log(rs.data.id)
            //                 console.log('删除成功')
            //                 that.list();
            //                 //this.tabIndex = rs.data.id
            //             }).catch(err=>{
            //                 console.log(err)
            //             })
            //             layer.close(index);
            //         }
            //     }); 
            // },
            // 长按删除
            showDeleteButton(e) {

                var that = this;
                this.Loop = setTimeout(function(){
                    var openid =  localStorage.getItem("openid")
                    layer.open({
                        content: '确定要删除此地址'
                        ,btn: ['确定', '不要']
                        ,yes: function(index){
                            // location.reload();
                            var upload = {
                                openid:openid,
                                id:e
                            }
                            that.$http.post('/vipmember/index/delAddress',qs.stringify(upload)).then(rs=>{
                                console.log(rs.data.id)
                                console.log('删除成功')
                                that.list();
                                //this.tabIndex = rs.data.id
                            }).catch(err=>{
                                console.log(err)
                            })
                            layer.close(index);
                        }
                    });
                    
                },1000);
            },
            clearLoop(e) {
                clearInterval(this.Loop);
            },
            //设置初始地址
            getAdd:function(){
				var that = this
                var openid = localStorage.getItem("openid")
                var upload = {
                    openid:openid,
                }
                this.$http.post('/vipmember/index/getDefaultAddress',qs.stringify(upload)).then(rs=>{
					console.log(rs.data.id)
					that.tabIndex = rs.data.id
                }).catch(err=>{
                    console.log(err)
                })
            },
            // 列表
            list:function(){
                var that = this
                var openid = localStorage.getItem("openid")
                var upload = {
                    openid:openid,
                }
                this.$http.post('/vipmember/index/getAddressList',qs.stringify(upload)).then(rs=>{
                    console.log(rs.data)
                    this.add = rs.data
                }).catch(err=>{
                    console.log(err)
                })
            },
            //设置收货地址
            setAddress:function(num){
                console.log(num)
                this.tabIndex = num;
                //返回
                var that = this
                var openid = localStorage.getItem("openid")
                var upload = {
                    openid:openid,
                    id:this.tabIndex,
                }
                this.$http.post('/vipmember/index/setDefaultAddress',qs.stringify(upload)).then(rs=>{
                    console.log(rs.data)
                    this.$router.go(-1)
                }).catch(err=>{
                    console.log(err)

                })
            },
            // 保存地址
            baocun:function(){
                this.$router.push({name:'AddressAdd'});
            }
        },
        mounted(){
            this.list();
            this.getAdd();
        }
    }
</script>

<style scoped>
.btn-big{
    width: 100%;
    height: 49px;
    line-height: 49px;
    text-align: center;
    color: #FFF;
    background: #FE2746;
    position: fixed;
    bottom: 0;
    left: 0;   
    border:0;
}
.order_select_pink{
    background-color: rgba(252, 40, 71, 1);
    border: 1px solid rgba(252, 40, 71, 1)!important;    
}
</style>